

<template>
<div class="tourist-home-page-detail">
<!--  左侧-->
  <div class="detail-left">
<div class="detail-left-container">
  <!--    主要事项-->
  <div class="main-matters">
    <div class="main-matters-title">
      <div class="main-matters-title-text">
        <div class="tip">
          <img style="width: 18px;height: 14px;margin-left: 4px" src="../../assets/images/notLoggedIn/home_icon.png">
        </div>
        <div class="main-matters-title-line">主要事项</div>
      </div>
    </div>
    <div class="main-matters-list">
      <div :class="currentleftMenu===index?'active-main-matters-item':'main-matters-item'" @click="menuClick(item,index)"  v-for="(item,index) in dataList" :key="index">
        <div class="main-matters-item-title">
          {{item.categoryName}}
        </div>

      </div>

    </div>

  </div>
  <!--    历史对话-->
  <div class="historical-dialogue">
    <div class="historical-dialogue-title">
      <div class="historical-dialogue-title-text">
        <div class="tip">
          <img style="width: 18px;height: 14px;margin-left: 4px" src="../../assets/images/notLoggedIn/home_icon.png">
        </div>
        <div class="historical-dialogue-title-line">历史对话</div>
      </div>
    </div>
    <div class="historical-dialogue-list"></div>
  </div>
</div>

  </div>
<!--  右侧-->
  <div class="detail-right">
    <div class="detail-right-container">
      <div class="detail-button-group">
        <div class="detail-button-group-left">
          <div class="detail-button-item">
            <div class="button-new" @click="newAnswer">
              <img style="width: 16px;height: 16px;margin-right: 10px" src="../../assets/images/notLoggedIn/add@2x.png">
              <div class="title">新建对话</div>
            </div>

          </div>
          <div class="detail-button-item right" >
            <div class="button-new" @click="clearAnswer">
              <img style="width: 16px;height: 16px;margin-right: 10px" src="../../assets/images/notLoggedIn/clear@2x.png">
              <div class="title">清除记录</div>
            </div>

          </div>
        </div>
        <div class="detail-button-group-right"></div>
      </div>
      <div class="detail-answer-group">
        <div class="input-top">
<!--          景点列表-->
          <div class="input-bottom-dialogue">
<!--            头像-->
            <div style="margin-right: 14px;">
              <img style="width: 60px;height: 60px;" src="../../assets/images/notLoggedIn/user_image.png"></img>
            </div>
<!--            右侧对话框-->
            <div class="input-bottom-dialogue-container">
            <div class="input-bottom-dialogue-container-box">
              <div class="container-box">
                <div> 关于{{categoryList.divisionName}}"{{categoryList.categoryName}}"您还需要明确具体内容:</div>
                <div style="display: flex;cursor: pointer" @click="handleCommand">
                  <div>{{categoryList.divisionName}}</div>
                  <div class="tip">
                    <img style="width: 18px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/arrow.png">
                  </div>
                </div>
              </div>
              <div class="category-list">
                <div @click="categoryClick(item,index)" :class="currentCategory===index?'active-category-list-item':'category-list-item'"
                     v-for="(item,index) in categoryList.informationNames">
                  <div class="category-list-item-title">
                    {{item.landmarkName}}
                  </div>
                </div>

              </div>
<!--              地市列表-->
              <div class="select-list-box" v-if="selected">
                <div v-for="(item,index) in cityList" :key="index" class="select-list-box-group">
                  <div class="un-select-list-box-item" @click="cityClick(item)">
                    {{item.cityName}}
                  </div>
                </div>
              </div>
            </div>
            </div>
          </div>
<!--        具体内容列表  -->
          <div class="input-bottom-dialogue specifics" v-if="Number(currentCategory)>-1 ">
            <!--            头像-->
            <div style="margin-right: 14px;">
              <img style="width: 60px;height: 60px;" src="../../assets/images/notLoggedIn/user_image.png"></img>
            </div>
            <!--            右侧对话框-->
            <div class="input-bottom-dialogue-container">
              <div class="input-bottom-dialogue-container-box">
                <div class="container-box">
                  <div> 关于{{categoryList.informationNames[currentCategory].landmarkName}}您还需要明确具体内容:</div>
                </div>
                <div class="category-list">
                  <div @click="specificsClick(item,index)" :class="currentSpecifics===index?'active-category-list-item':'category-list-item'"  v-for="(item,index) in specificsList">
                    <div class="category-list-item-title">
                      {{item.name}}
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
<!--          文化介绍等模块-->
<!--          v-if="Number(currentSpecifics)>-1"-->
          <CultureIntroductionModule
              :currentVoice="currentVoice"
              v-if="Number(currentSpecifics)===0" :selectCulturePlace="categoryList.informationNames[currentCategory]" :selectCultureInfo="specificsList[currentSpecifics]"/>
<!--最佳路线-->
          <BestRouteModule :currentVoice="currentVoice" v-if="Number(currentSpecifics)===1" :selectCulturePlace="categoryList.informationNames[currentCategory]" :selectCultureInfo="specificsList[currentSpecifics]"/>
<!--          景点游览-->
          <AttractionTourModule :currentVoice="currentVoice" v-if="Number(currentSpecifics)===2" :selectCulturePlace="categoryList.informationNames[currentCategory]" :selectCultureInfo="specificsList[currentSpecifics]"/>
<!--          特色美食-->
          <SpecialtyFoodModule :currentVoice="currentVoice"  v-if="Number(currentSpecifics)===3" :selectCulturePlace="categoryList.informationNames[currentCategory]" :selectCultureInfo="specificsList[currentSpecifics]"/>
<!--          交通信息-->
          <TrafficInformationModule :currentVoice="currentVoice" v-if="Number(currentSpecifics)===4" :selectCulturePlace="categoryList.informationNames[currentCategory]" :selectCultureInfo="specificsList[currentSpecifics]"/>
          <!--          用户提问模块-->
<!--          <UserConversationModule />-->

        </div>
        <div class="input-bottom">
          <div class="tip">音频输出格式：如我想咨询太原晋祠文化介绍/最佳路线/景点游览/特色美食/交通信息</div>
              <VoiceInputBox @changeVioce="changeVioce"/>

        </div>
      </div>
    </div>

  </div>

</div>
</template>
<script setup>
import {ref} from "vue";
import history from "@/assets/images/notLoggedIn/history_bg.png";
import folklore from "@/assets/images/notLoggedIn/folklore_bg.png";
import celebrities from "@/assets/images/notLoggedIn/Celebrities_bg.png";
import redCultural from "@/assets/images/notLoggedIn/RedCultural_bg.png";
import diet from "@/assets/images/notLoggedIn/Diet_bg.png";
import IFCAT from "@/assets/images/notLoggedIn/IFCAT_bg.png";
import {useTouristHomepageStore} from "@/store/touristHomepage";
import api from "@/service/TouristHomepage";
import CultureIntroductionModule from "@/views/notLoggedIn/components/CultureIntroductionModule.vue";
import UserConversationModule from "@/views/notLoggedIn/components/UserConversationModule.vue";
import BestRouteModule from "@/views/notLoggedIn/components/BestRouteModule.vue";
import AttractionTourModule from "@/views/notLoggedIn/components/AttractionTourModule.vue";
import SpecialtyFoodModule from "@/views/notLoggedIn/components/SpecialtyFoodModule.vue";
import TrafficInformationModule from "@/views/notLoggedIn/components/TrafficInformationModule.vue";
import VoiceInputBox from "@/views/notLoggedIn/components/VoiceInputBox.vue";
import {useCulturalSelectionStore} from "@/store/culturalSelection";

const dataList = ref([])

dataList.value = [
  {
    id:'1',
    categoryCode: '01',
    categoryName: '历史文旅',
    englishName: 'HISTORY',
    image: history,
  },
  {
    id:'2',
    categoryCode: '02',
    categoryName: '民俗文旅',
    englishName: 'FOLKLORE',
    image: folklore,
  },
  {
    id:'3',
    categoryCode: '03',
    categoryName: '名人文旅',
    englishName: 'CELEBRITIES',
    image: celebrities,
  },
  {
    id:'4',
    categoryCode: '04',
    categoryName: '红色文旅',
    englishName: 'REDCULTURA',
    image: redCultural,
  },
  {
    id:'5',
    categoryCode: '05',
    categoryName: '饮食文旅',
    englishName: 'DIE',
    image: diet,
  },
  {
    id:'6',
    categoryCode: '06',
    categoryName: '网红文旅',
    englishName: 'IFCAT',
    image: IFCAT,
  },
]
// 当前点击的左侧菜单
const currentleftMenu = ref(-1)
function menuClick(data,index){
  currentleftMenu.value=index;
//   修改store中数据
  useTouristHomepageStore().setTouristCategory.categoryName = data.categoryName;
  useTouristHomepageStore().setTouristCategory.categoryCode = data.categoryCode;
  // 字符串转为数字
  useTouristHomepageStore().setTouristCategory.id = data.id;
  getCategoryListApi({divisionCode:useTouristHomepageStore().setTouristCategory.divisionCode})
  currentCategory.value=-1;
  currentSpecifics.value=-1;
}

// 计算属性
const cityList = computed(() => {
  return useTouristHomepageStore().setTouristCity;
})
const selected = ref(false);
const currentClickInfo=ref(null);
function handleCommand(){
  selected.value=!selected.value;
}
function cityClick(data){
  currentClickInfo.value=data;
  // 修改store中数据
  useTouristHomepageStore().setTouristCategory.divisionName = data.cityName;
  useTouristHomepageStore().setTouristCategory.divisionCode = data.cityCode;
  selected.value=false;
  getCategoryListApi({divisionCode:data.cityCode})
  currentCategory.value=-1;
  currentSpecifics.value=-1;

}
// 请求旅游信息-文化旅游一级分类类别列表数据
function getCategoryListApi(data){
  api.getCategoryList(data).then((res) => {
    // 把res.data的数据按id一一对应赋值到dataList.value中
    if(res.data.length>0){
      let currentMenuId=Number(useTouristHomepageStore().setTouristCategory.id);
    // 查看目前点击的菜单
      res.data.forEach((item,index) => {
       if(currentMenuId===Number(item.id)){
         useTouristHomepageStore().setTouristCategory.informationNames= res.data[index].informationNames;
       }
      })
    }else {
      useTouristHomepageStore().setTouristCategory.informationNames = [];
    }


  });
}
// 景点信息具体内容
const specificsList=ref([
    {
      id:1,
      name:"文化介绍",
    },
    {
      id:2,
      name:"最佳路线",
    },
    {
      id:3,
      name:"景点游览",
    },
    {
      id:4,
      name:"特色美食",
    },
    {
      id:5,
      name:"交通信息",
    },

])
// 保存点击景点信息
const currentCategory=ref(-1);
const currentSpecifics=ref(-1);
function categoryClick(item,index){
  currentCategory.value=index;
 currentSpecifics.value=-1;

}
function specificsClick(item,index){
  currentSpecifics.value=index;
  currentVoice.value={};

}
function newAnswer(){
  clearStatus()
}
function clearAnswer(){
  clearStatus()
}
function clearStatus(){
  currentCategory.value=-1;
  currentSpecifics.value=-1;
}
const currentVoice=ref(null)
function changeVioce(voice){
  console.log( 'voice-----',voice)
//   传给子级
  currentVoice.value=voice;


}
//   景点数组
const categoryList=ref([])

onMounted(() => {
//   获取store中数据
  categoryList.value = useTouristHomepageStore().setTouristCategory;
  if(Number(categoryList.value.id)>0){
    currentleftMenu.value=(Number(categoryList.value.id)-1);

  }

});
// 监听
watch(() => {
  if(Number(currentleftMenu.value)>-1){
    if(useCulturalSelectionStore().culturalSelection && Number(currentleftMenu.value)>-1){
      specificsList.value.forEach(item => {
        if(item.name===useCulturalSelectionStore().culturalSelection && Number(item.id)>-1){
          currentSpecifics.value = Number(item.id)-1;

        }
      })
    }
  }



})
</script>
<style scoped lang="scss">
.tourist-home-page-detail{
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/login/login_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  .detail-left{
    width: 280px;
    height: 100%;
    border-radius: 0px 0px 0px 0px;
    background-color: #FAF6F3;
    display: flex;
    justify-content: center;
    background-image: url("@/assets/images/notLoggedIn/detail_back.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .detail-left-container{
      width: 220px;
      .main-matters{
        .main-matters-title{
          .main-matters-title-text{
            line-height: 84px;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            border-radius: 0px 0px 0px 0px;
            .main-matters-title-line{
              width: 96px;
              height: 24px;
              font-family: DingliesongtypefaceRegular;
              font-weight: 400;
              font-size: 24px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;

            }
          }

        }
.main-matters-list{
margin-top: 12px;
  .main-matters-item{
    width: 220px;
    height: 40px;
    line-height: 40px;
    .main-matters-item-title{
      font-family: DingliesongtypefaceRegular;
      width: 64px;
      height: 16px;
      font-weight: 400;
      font-size: 16px;
      color: #9B6548;
      text-align: left;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }

  }
  .active-main-matters-item{
    width: 220px;
    height: 40px;
    background: linear-gradient( 90deg, #FFFFFF 0%, #EFE2D4 100%);
    border-radius: 8px 8px 8px 8px;
    line-height: 40px;
    .main-matters-item-title{
      font-family: DingliesongtypefaceRegular;
      width: 64px;
      height: 16px;
      font-weight: 400;
      font-size: 16px;
      color: #9B6548;
      text-align: left;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }
  }
}
      }
      .historical-dialogue{
        .historical-dialogue-title{
          .historical-dialogue-title-text{
            line-height: 84px;
            border-bottom: 1px solid #E5E5E5;
            display: flex;
            border-radius: 0px 0px 0px 0px;
            .historical-dialogue-title-line{
              width: 96px;
              height: 24px;
              font-family: DingliesongtypefaceRegular;
              font-weight: 400;
              font-size: 24px;
              color: #9B6548;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }

      }
    }

  }
  .detail-right{
    width: calc(100% - 280px);
    display: flex;
    justify-content: center;

    .detail-right-container{
      width: 1200px;
      .detail-button-group{
        height: 100px;
        width: 80%;
        display: flex;
        .detail-button-group-left{
          display: flex;
          align-items: center;
          .detail-button-item{
            width: 118px;
            height: 40px;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #DCB6A2;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .button-new{
              display: flex;
              width: 82px;
              .title{
                font-family: DingliesongtypefaceRegular;
                width: 56px;
                height: 14px;
                font-weight: 400;
                font-size: 14px;
                color: #9B6548;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }

          }
          .right{
            margin-left: 24px;
          }
        }

      }
      .detail-answer-group{
        height: calc(100% - 100px);
        .input-top{
          height: calc(100% - 150px);
          overflow: auto;
          //景点对话框
          .input-bottom-dialogue{
            display: flex;
            .input-bottom-dialogue-container{
              display: flex;
              justify-content: center;
              align-items: center;
              height: 90px;
              background: #EDDDCD;
              border-radius: 10px 10px 10px 10px;
              width: calc(100% - 20px);
              .input-bottom-dialogue-container-box{
                width: calc(100% - 40px);
                height: calc(100% - 40px);
                position: relative;
                .container-box{
                  display: flex;
                  justify-content: space-between;
                  height: 16px;
                  font-family: DingliesongtypefaceRegular;
                  font-weight: 400;
                  font-size: 16px;
                  color: #9B6548;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                }
                .category-list{
                  display: flex;
                  margin-top: 16px;
                  .category-list-item{
                    cursor: pointer;
                    margin-left: 8px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #9B6548;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    font-family: DingliesongtypefaceRegular;
                    height: 22px;
                    background: #F5ECE2;
                    border-radius: 6px 6px 6px 6px;
                    line-height: 22px;
                      .category-list-item-title{
                        padding: 0 5px;
                      }
                  }
                  .active-category-list-item{
                    cursor: pointer;
                    margin-left: 8px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    font-family: DingliesongtypefaceRegular;
                    height: 22px;
                    background: #9B6548;
                    border-radius: 6px 6px 6px 6px;
                    line-height: 22px;
                    .category-list-item-title{
                      padding: 0 5px;
                    }
                  }

                }
                .select-list-box{
                  background-color: #FFFFFF;
                  position: absolute;
                  right: 0;
                  top:40px;
                  width: 100px;
                  height: 208px;
                  z-index: 2000;
                  overflow: auto;
                  .select-list-box-group{
                    display: flex;
                    justify-content: center;
                    .un-select-list-box-item{
                      cursor: pointer;
                      width: 60px;
                      height: 30px;
                      border-radius: 100px 100px 100px 100px;
                      color: #AC6117;
                      text-align: center;
                      margin-top: 16px;
                      font-family: DingliesongtypefaceRegular;
                      font-weight: 400;
                      font-size: 14px;
                      line-height: 14px;
                      font-style: normal;
                      text-transform: none;
                      line-height: 30px;
                    }
                    .un-select-list-box-item:hover{
                      cursor: pointer;
                      width: 60px;
                      height: 30px;
                      background: #F5ECE2;
                      border-radius: 100px 100px 100px 100px;
                      color: #AC6117;
                      text-align: center;
                      margin-top: 16px;
                      font-family: DingliesongtypefaceRegular;
                      font-weight: 400;
                      font-size: 14px;
                      line-height: 14px;
                      font-style: normal;
                      text-transform: none;
                      line-height: 30px;
                    }
                  }

                }
              }

            }
          }
        //  景点内容具体
          .specifics{
            margin-top: 20px;
          }

        }
        .input-bottom{
          .tip{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #CCB29C;
            text-align: left;
            font-style: normal;
            text-transform: none;

          }
        }
      }
    }


  }
}
</style>